<template>
  <div class="content" v-loading="loading">
    <el-card>
      <div class="header">
        <h3 class="title">用户列表</h3>
        <el-button class="add-btn" type="primary" icon="Plus" @click="addUser">新建用户</el-button>
      </div>

      <div class="table">
        <el-table :data="usersList" border stripe>
          <el-table-column type="selection" width="55" />
          <el-table-column align="center" label="序号" type="index" width="70" />
          <el-table-column align="center" label="用户名" prop="name" width="100" />
          <el-table-column align="center" label="真实名" prop="realname" width="100" />
          <el-table-column align="center" label="手机号码" prop="cellphone" width="150" />
          <el-table-column align="center" label="状态" prop="enable" width="70">
            <template #default="{ row }">
              <el-tag :type="row.enable === 1 ? 'success' : 'danger'">
                {{ row.enable === 1 ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="createAt">
            <template #default="{ row }">{{ formatUTC(row.createAt) }}</template>
          </el-table-column>
          <el-table-column align="center" label="更新时间" prop="updateAt">
            <template #default="{ row }">{{ formatUTC(row.updateAt) }}</template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="150">
            <template #default="{ row }">
              <el-button size="small" link icon="Edit" type="primary" @click="eidtUser(row)">编辑</el-button>
              <el-button size="small" link icon="Delete" type="danger" @click="removeUser(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination">
        <el-pagination
          style="float: right; margin-bottom: 15px"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30]"
          layout="sizes, prev, pager, next, jumper, total"
          :total="+totalCount"
          @size-change="fetchUserListData()"
          @current-change="fetchUserListData()"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { storeToRefs } from 'pinia'
  import useUserStore from '@/store/main/system/user/user'
  import { formatUTC } from '@/utils/format'
  import type { IUser } from '@/services/main/system/user/type'

  const $emits = defineEmits(['newClick', 'editClick'])

  const userStore = useUserStore()
  // 使用storeToRefs: 将store中的数据转换为响应式数据（如果不转换为响应式数据，在获取到数据发送请求时，页面第一次会获取不到数据，之后更新也不会即使响应）
  const { usersList, loading, totalCount, currentPage, pageSize } = storeToRefs(userStore)
  fetchUserListData()

  // 删除操作
  function removeUser(user: IUser) {
    ElMessageBox.confirm(`是否确定删除${user.realname}`, '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      userStore.deleteUserByIdAction(user.id as number)
    })
  }

  // 点击新建用户
  function addUser() {
    $emits('newClick')
  }

  // 编辑用户
  function eidtUser(user: IUser) {
    $emits('editClick', user, currentPage.value, pageSize.value)
  }

  function fetchUserListData(searchForm: IUser = {}) {
    const size = pageSize.value
    const offset = (currentPage.value - 1) * size
    const info = { ...searchForm, size, offset }
    userStore.postUserListAction(info)
  }

  defineExpose({
    fetchUserListData
  })
</script>

<style lang="scss" scoped>
  .content {
    .header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .title {
        font-size: 20px;
      }

      .add-btn {
        margin-left: auto;
      }
    }
    .table {
      .el-table {
        margin-bottom: 15px;
        overflow-y: scroll;
        max-height: 330px;
      }
    }
  }
</style>
